{% extends theme_path('admin/base.html') %}

{% block title %}浏览历史管理{% endblock %}

{% block content %}
<div class="bg-white rounded-lg shadow-sm">
    <div class="px-6 py-4 border-b">
        <div class="flex flex-col lg:flex-row justify-between items-stretch lg:items-center space-y-4 lg:space-y-0">
            <h2 class="text-xl font-bold">浏览历史管理</h2>
            <div class="flex flex-col sm:flex-row items-stretch sm:items-center space-y-4 sm:space-y-0 sm:space-x-4 w-full lg:w-auto">
                <form method="get" 
                    class="flex flex-col sm:flex-row items-stretch sm:items-center space-y-4 sm:space-y-0 sm:space-x-4 flex-1">
                    <select name="search_type" 
                           class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full sm:w-auto">
                        <option value="article" {% if search_type == 'article' %}selected{% endif %}>文章标题</option>
                        <option value="user" {% if search_type == 'user' %}selected{% endif %}>用户名</option>
                        <option value="id" {% if search_type == 'id' %}selected{% endif %}>ID</option>
                    </select>
                    <div class="relative flex-1">
                        <input type="text" name="q" 
                               value="{{ search_query }}"
                               placeholder="搜索历史记录..." 
                               class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                            </svg>
                        </div>
                    </div>
                    <button type="submit" 
                           class="w-full sm:w-auto px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                        搜索
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                    <th class="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                    <th class="hidden sm:table-cell px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">文章</th>
                    <th class="hidden sm:table-cell px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">浏览时间</th>
                    <th class="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for history in pagination.items %}
                <tr data-history-id="{{ history.id }}" data-user-id="{{ history.user.id }}">
                    <td class="px-4 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ history.id }}</td>
                    <td class="px-4 sm:px-6 py-4">
                        <div class="flex items-center">
                            <img src="{{ history.user.avatar }}" alt="avatar" class="w-8 h-8 rounded-full">
                            <a href="{{ url_for('user.author', id=history.user.id) }}" 
                               class="ml-2 text-sm font-medium text-gray-900 hover:text-blue-600">
                                {{ history.user.username }}
                            </a>
                        </div>
                        <div class="sm:hidden mt-1 text-xs text-gray-500 space-y-1">
                            <div class="line-clamp-1">
                                <a href="{{ ArticleUrlGenerator.generate(history.article.id, history.article.category_id, history.article.created_at) }}" 
                                   class="text-blue-600 hover:text-blue-900">
                                    {{ history.article.title }}
                                </a>
                            </div>
                            <div>{{ history.viewed_at.strftime('%Y-%m-%d %H:%M') }}</div>
                        </div>
                    </td>
                    <td class="hidden sm:table-cell px-6 py-4">
                        <a href="{{ ArticleUrlGenerator.generate(history.article.id, history.article.category_id, history.article.created_at) }}" 
                           class="text-sm text-blue-600 hover:text-blue-900" target="_blank">
                            {{ history.article.title }}
                        </a>
                    </td>
                    <td class="hidden sm:table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ history.viewed_at.strftime('%Y-%m-%d %H:%M') }}
                    </td>
                    <td class="px-4 sm:px-6 py-4 whitespace-nowrap text-sm">
                        <div class="flex items-center space-x-4">
                            <button onclick="deleteHistory({{ history.id }})"
                                    class="text-red-600 hover:text-red-900">
                                删除
                            </button>
                            <button onclick="clearUserHistory({{ history.user.id }})"
                                    class="text-red-600 hover:text-red-900">
                                清空该用户历史
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    {% if pagination.pages > 1 %}
    <div class="px-6 py-4 mt-4 border-t">
        {% with endpoint='admin.histories', kwargs={'q': search_query, 'search_type': search_type} %}
        {% include 'components/pagination.html' %}
        {% endwith %}
    </div>
    {% endif %}
</div>

<script>
function deleteHistory(historyId) {
    showAlert('确定要删除此条浏览记录吗？', 'warning', '确认删除', function() {
        fetch(`{{ admin_url }}/histories/${historyId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRFToken': '{{ csrf_token() }}'
            }
        }).then(response => {
            if (response.ok) {
                const row = document.querySelector(`tr[data-history-id="${historyId}"]`);
                if (row) {
                    row.remove();
                    showAlert('记录删除成功', 'success', '成功');
                } else {
                    location.reload();
                }
            } else {
                showAlert('删除失败', 'error', '错误');
            }
        });
    });
}

function clearUserHistory(userId) {
    showAlert('确定要清空该用户的所有浏览记录吗？此操作不可恢复！', 'warning', '确认清空', function() {
        fetch(`{{ admin_url }}/histories/clear/${userId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRFToken': '{{ csrf_token() }}'
            }
        }).then(response => {
            if (response.ok) {
                const rows = document.querySelectorAll(`tr[data-user-id="${userId}"]`);
                rows.forEach(row => row.remove());
                showAlert('清空成功', 'success', '成功');
                if (rows.length === 0) {
                    location.reload();
                }
            } else {
                showAlert('清空失败', 'error', '错误');
            }
        });
    });
}
</script>
{% endblock %} 